<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪食蛇游戏</title>
    <link rel="stylesheet" href="snake.css">
</head>
<body>
    <div class="game-wrapper">
        <div class="game-container">
            <div class="game-header">
                <select id="difficultySelect" class="difficulty-select">
                    <option value="easy">简单</option>
                    <option value="medium">中等</option>
                    <option value="hard">困难</option>
                </select>
                <div class="score">分数: <span id="scoreValue">0</span></div>
            </div>
            <canvas id="gameCanvas"></canvas>
            <div class="game-info">
                <button id="startButton">开始游戏</button>
            </div>
        </div>
        <div class="leaderboard">
            <h2>排行榜</h2>
            <div class="leaderboard-difficulty">
                <button class="leaderboard-tab active" data-difficulty="easy">简单</button>
                <button class="leaderboard-tab" data-difficulty="medium">中等</button>
                <button class="leaderboard-tab" data-difficulty="hard">困难</button>
            </div>
            <div class="leaderboard-content">
                <table id="leaderboardTable">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>玩家</th>
                            <th>分数</th>
                        </tr>
                    </thead>
                    <tbody id="leaderboardBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="gameOverModal" class="modal">
        <div class="modal-content">
            <h2>游戏结束</h2>
            <p>你的分数: <span id="finalScore">0</span></p>
            <div class="input-group">
                <input type="text" id="playerName" placeholder="输入你的名字" maxlength="10">
                <button id="submitScore">提交分数</button>
            </div>
            <button id="playAgain">再玩一次</button>
        </div>
    </div>
    <script src="snake.js"></script>
</body>
</html>